{% extends 'base.html' %}

{% block title %}处理工单 - {{ ticket.title }}{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title mb-0">处理工单: {{ ticket.title }}</h3>
                </div>
                <div class="card-body">
                    <!-- 工单基本信息 -->
                    <div class="alert alert-info">
                        <strong>当前状态:</strong> 
                        <span class="badge 
                            {% if ticket.status == 'pending' %}bg-warning
                            {% elif ticket.status == 'in_progress' %}bg-info
                            {% elif ticket.status == 'completed' %}bg-success
                            {% else %}bg-light text-dark{% endif %}">
                            {{ ticket.get_status_display }}
                        </span>
                    </div>

                    <div class="mb-4">
                        <h5>工单信息</h5>
                        <div class="border rounded p-3">
                            <p><strong>创建者:</strong> {{ ticket.created_by.username }}</p>
                            <p><strong>问题描述:</strong></p>
                            <div class="bg-light p-2 rounded">
                                {{ ticket.description|linebreaks }}
                            </div>
                            {% if ticket.assets.exists %}
                            <p class="mt-2"><strong>关联设备:</strong>
                                {% for asset in ticket.assets.all %}
                                <span class="badge bg-light text-dark me-1">{{ asset.code }}</span>
                                {% endfor %}
                            </p>
                            {% endif %}
                        </div>
                    </div>

                    <!-- 处理操作 -->
                    <div class="mb-4">
                        <h5>工单操作</h5>
                        <div class="border rounded p-3">
                            {% if ticket.status == 'pending' %}
                            <form method="post">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="start">
                                <p>您即将开始处理此工单，状态将变为"处理中"。</p>
                                <button type="submit" class="btn btn-primary">
                                    🛠️ 开始处理工单
                                </button>
                                <a href="{% url 'tickets:ticket_detail' ticket.pk %}" class="btn btn-secondary">返回详情</a>
                            </form>
                            {% elif ticket.status == 'in_progress' %}
                            <form method="post">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="complete">
                                <p>确认已完成此工单的维修工作？</p>
                                <button type="submit" class="btn btn-success">
                                    ✅ 标记为已完成
                                </button>
                                <a href="{% url 'tickets:ticket_detail' ticket.pk %}" class="btn btn-secondary">返回详情</a>
                            </form>
                            {% elif ticket.status == 'completed' %}
                            <div class="alert alert-success">
                                <p>此工单已完成于 {{ ticket.completed_at|date:"Y-m-d H:i" }}</p>
                                <a href="{% url 'tickets:ticket_detail' ticket.pk %}" class="btn btn-outline-success">
                                    查看工单详情
                                </a>
                            </div>
                            {% else %}
                            <div class="alert alert-secondary">
                                <p>此工单当前状态为: {{ ticket.get_status_display }}</p>
                                <a href="{% url 'tickets:ticket_detail' ticket.pk %}" class="btn btn-outline-secondary">
                                    返回工单详情
                                </a>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- 维修记录操作 -->
                    <div class="mb-4">
                        <h5>维修记录</h5>
                        <div class="border rounded p-3">
                            <p>您可以添加详细的维修记录：</p>
                            <ul class="text-muted">
                                <li>维修过程和步骤</li>
                                <li>使用的零件和材料</li>
                                <li>实际花费的时间</li>
                                <li>遇到的问题和解决方案</li>
                            </ul>
                            <div class="d-grid">
                                <a href="{% url 'tickets:add_maintenance_record' ticket.pk %}" class="btn btn-outline-primary">
                                    📝 添加维修记录
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 操作历史 -->
                    {% if maintenance_records %}
                    <div class="mb-4">
                        <h5>历史记录</h5>
                        {% for record in maintenance_records %}
                        <div class="border rounded p-3 mb-2">
                            <div class="d-flex justify-content-between">
                                <strong>{{ record.technician.username }}</strong>
                                <small class="text-muted">{{ record.created_at|date:"Y-m-d H:i" }}</small>
                            </div>
                            <p class="mb-1 mt-2">{{ record.description }}</p>
                            {% if record.parts_used %}
                            <div class="text-muted">
                                <small>使用零件: {{ record.parts_used }}</small>
                            </div>
                            {% endif %}
                            {% if record.hours_spent > 0 %}
                            <div class="text-muted">
                                <small>耗时: {{ record.hours_spent }} 小时</small>
                            </div>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.container {
    max-width: 800px;
    margin: 20px auto;
}
.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    border-radius: 8px;
}
.card-header {
    background-color: #2c3e50;
    color: white;
    border-radius: 8px 8px 0 0 !important;
}
.badge {
    font-size: 0.85em;
    padding: 0.5em 0.75em;
}
.btn {
    border-radius: 5px;
    padding: 10px 20px;
}
.alert {
    border-radius: 5px;
    margin-bottom: 20px;
}
.border {
    border-radius: 5px;
}
</style>
{% endblock %}
